<template>
  	<div class="div">
    	<PageTitle title="财务统计列表"></PageTitle>
    	<div class="top">
            <div class="date">
                <el-date-picker
                v-model="date"
                @change="changeDate"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
                </el-date-picker>
            </div>
      		<el-row :gutter="20">
				<el-col :span="7">
					<el-card class="box-card">
                        
						<div class="car_cont">
              				<i class="el-icon-coin"></i>
              				<div class="con">收入：{{income}}元</div>
            			</div>
					</el-card>
				</el-col>
        		<el-col :span="6">
					<el-card class="box-card">
						<div class="car_cont">
							<i class="el-icon-coin"></i>
							<div class="con">总收入：{{totalRevenue}}元</div>
						</div>
					</el-card>
				</el-col>
        		<el-col :span="7">
          			<el-card class="box-card">
            			<div class="car_cont">
              				<i class="el-icon-bank-card"></i>
              				<div class="con">余额：{{money}}元</div>
              				<div class="btns" v-if="user_state!=1">
								<div class="btn">
									<el-button type="primary" @click="withdraw = true">提现</el-button>
								</div>
              				</div>
            			</div>
          			</el-card>
        		</el-col>
      		</el-row>
    	</div>
    	<el-table stripe :data="tableData">
      		<el-table-column prop="id" label="id"></el-table-column>
      		<el-table-column prop="card" label="提现账号"></el-table-column>
      		<el-table-column prop="price" label="提现金额"></el-table-column>
      		<el-table-column label="状态">
				<template slot-scope="scope">
					{{scope.row.state == 1?'打款中':'已完成'}}
				</template>
			</el-table-column>
			  <el-table-column prop="create_at" label="提现时间"></el-table-column>
      		<el-table-column label="操作">
				<template slot-scope="scope">
					<router-link
						:to="{name: 'userBalanceListDetail', params: {items: scope.row}}"
						class="color-theme margin-right"
					>查看</router-link>
					
				</template>
      		</el-table-column>
      		
    	</el-table>
    	<div class="pagination-wrapper">
			<el-pagination
				layout="prev, pager, next"
				@current-change="pageChange"
				:page-size="pageSize"
				:total="totalCount"
				:current-page="pageNum"
			></el-pagination>
    	</div>
  	</div>
</template>

<script>
	import PageTitle from "@/components/pageTitle/PageTitle.vue";
	import Upload from '@/components/upload/Upload.vue'
	export default {
		name: "RechargeList",
		components: {
			PageTitle,
			Upload
		},
  		data() {
			return {
				tableData: [],
				pageNum: 1,
				pageSize: 10,
				totalCount: 0,
				user_state: localStorage.getItem("user_state"),
				totalRevenue:0,//总收入
				income:0,//今日收入
				money:0,//余额
                date:[]
			};
	  	},
	  	activated() {
			this._getList();
			this.getTotalRevenue()
			this.getIncome()
			this.getMoney()
		},
  		methods: {
			//余额
			async getMoney(){
				let {data:{code,data}} = await this.$axios({
					url:this.$api + "/v1/carry/money",
					methods:"GET",
					params:{}
				})
				console.log('余额--------',data)
				if (code == 0) {
					this.money = data
				}
			},
            //选则日期
            changeDate(){
                console.log(this.date)
                this.getIncome()
            },
			//总收入
			async getTotalRevenue(){
				let {data:{code,data}} = await this.$axios({
					url:this.$api + "/v1/account/channel",
					method:"GET",
					params:{}
				})
				console.log('总收入--------',data)
				if (code == 0) {
					this.totalRevenue = data
				}
			},
			//今日收入
			async getIncome(){
				let {data:{code,data}} = await this.$axios({
					url:this.$api + "/v1/account/day",
					methods:"GET",
					params:{
                        start_time:this.date?this.date[0]:'',
                        end_time:this.date?this.date[1]:'',
                    }
				})
				console.log('今日收入--------',data)
				if (code == 0) {
					this.income = data
				}
			},
    		//获取活动列表
    		async _getList() {
      			let {data: { code, data }} = await this.$axios({
        			url: this.$api + "/v1/carry/present",
        			method: "GET",
					params: {
						size: this.pageSize,
						page: this.pageNum
					}
      			});
      			if (code === 0) {
          			this.tableData = data.items;
          			this.totalCount = parseInt(data.pages.totalCount);
      			}
			},
			//翻页
   			pageChange(pageNum) {
      			this.pageNum = pageNum;
      			this._getList();
    		}
  		}
	};
</script>

<style lang="scss" scoped>
@import "@/assets/css/select-bar.scss";
.list-img {
  width: 80%;
  height: 60px;
  cursor: pointer;
}
.el-button--text {
  text-decoration: none;
}
.qrcode {
  width: 150px;
  height: 150px;
  margin: 0 auto;
}
.top {
  margin-bottom: 20px;
}
.box-card .car_cont {
  padding: 20px;
  position: relative;
}
.box-card .car_cont .btns {
  position: absolute;
  right: 20px;
  bottom: 20px;
}
.box-card .car_cont .btns .btn {
  margin: 5px auto;
}
.box-card .car_cont i {
  font-size: 50px;
  margin-bottom: 20px;
}
.box-card .car_cont .con {
  font-size: 20px;
  width: 70%;
  word-wrap: break-word;
}
.date{
    margin: 20px 0;
}
</style>
